<template>
  <div  :class="header?'app-container':''">
    <div v-for="tab in tabs" class="yy-tab">
      <transition name="el-zoom-in-center" >
        <div v-if="current===tab.index" >
          <div class="yy-tab-header" v-if="current!==tabs[0].index&&header">
            <el-page-header  @back="goBack(tab.index)" :content="tab.name"></el-page-header>
            <el-divider></el-divider>
          </div>
          <slot :name="tab.index"></slot>
        </div>
      </transition>
    </div>
  </div>


</template>


<script>
  export default {
    props: {
      tabs:{
        type:Array,
        require:true
      },
      header:{
        type:Boolean,
        require:false,
        default: true
      },
      current:{
        type:String,
        require:true
      }
    },
    data(){
      return {
      }
    },
    methods:{
      goBack(message){
        this.$emit( 'goBack', message );
        //this.$parent.current=this.tabs[0].index;
      }
    }
  }
</script>

<style>
  .yy-tab .el-page-header__left{
    color: #409eff;
    cursor: pointer;
  }
</style>
